/* eslint-disable @typescript-eslint/no-explicit-any */
import { PropType, Fragment, StyleValue } from 'vue';
import { editorCompnoent } from '../../../store/defaultLabelComponentList';
import { TextCompnoentProps, IComponentInfo } from '../../../store/storeTypes';
import TemplateColor from '../../../components/TemplateColor/index.vue';

import style from './index.module.css';

interface FormPropsType extends Required<Omit<IComponentInfo, 'before' | 'after'>> {
  value: string;
  // eslint-disable-next-line no-unused-vars
  events: { [key: string]: (e: Event) => void };
}

const componentMap = {
  'template-color': TemplateColor
};

export default defineComponent({
  name: 'CurrentCustomComponentInfo',
  props: {
    componentInfo: {
      type: Object as PropType<TextCompnoentProps>,
      required: true
    }
  },
  emits: ['update-view'],
  setup(props, { emit }) {
    const propsForms = computed(() => {
      /* { text: { component: 'el-input', value: 'content' } } */
      return Object.keys(props.componentInfo).reduce((p, key) => {
        const newKey = key as keyof TextCompnoentProps;
        const item = editorCompnoent[newKey];
        if (item) {
          const _value = props.componentInfo[newKey];
          const { before, after, eventName = 'change', valueAlias = 'value' } = item;
          const humpEventName = eventName[0].toUpperCase() + eventName.slice(1);
          const newItem = {
            ...item,
            valueAlias,
            value: before ? before(_value as string) : _value,
            events: {
              [`on${humpEventName}`](e: any) {
                emit('update-view', {
                  key: newKey,
                  value: after ? after(e) : e
                });
              }
            }
          };
          p[newKey as string] = newItem;
        }
        return p;
        // eslint-disable-next-line no-unused-vars
      }, {} as { [key in keyof TextCompnoentProps]: FormPropsType });
    });
    return () => (
      <Fragment>
        {propsForms.value &&
          Object.keys(propsForms.value).map((k) => {
            const value = propsForms.value[k] as FormPropsType;
            const Component =
              typeof value.component === 'string' ? componentMap[value.component] : value.component;
            const SubComponent = value.subComponent
              ? typeof value.subComponent === 'string'
                ? componentMap[value.subComponent]
                : value.subComponent
              : null;
            return (
              <div key={k} class={style['edit-wrapper-layout']}>
                {value && (
                  <Fragment>
                    <span class={style['edit-item-layout']}>{value.label}</span>
                    <Component
                      style={{ ...value.componentStyle } as StyleValue}
                      {...{ ...value.extraProps, [value.valueAlias]: value.value, ...value.events }}
                    >
                      {value.subComponent && (
                        <Fragment>
                          {value.subComponentProps.options.map(
                            (subValue: { [key: string]: any }) => (
                              <SubComponent key={subValue.value} value={subValue.value}>
                                {subValue.label}
                              </SubComponent>
                            )
                          )}
                        </Fragment>
                      )}
                    </Component>
                  </Fragment>
                )}
              </div>
            );
          })}
      </Fragment>
    );
  }
});
